/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="memory-card">
        <div class="memory-card-top">
            <div class="memory-card-top__left">
                <div class="memory-card-top__value">
                    <span>{{ data.usage }}</span>
                    <span class="memory-card-top__value--ignore">GB</span>
                    <span>/{{ data.sum }}</span>
                    <span class="memory-card-top__value--ignore">GB</span>
                </div>
                <div class="memory-card-top__label">当前内存利用率</div>
            </div>
            <img src="./img/Memory.png" alt="">
        </div>
        <el-divider/>
        <div class="memory-card-charts">
            <charts :time="time" type="GB" :lineChartsData="data.list"/>
        </div>
    </div>
</template>

<script>
import IntervalTask from 'src/util/interval_task';
import Charts from './charts.vue';

export default {
    components: {Charts},
    props: {
        id: {
            type: String,
            default: ''
        },
        time: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            data: {}
        }
    },
    watch: {
        id() {
            this._createIntervalTask()
        },
        time() {
            this.getData()
        }
    },
    methods: {
        async getData() {
            const {success, data, msg} = await this.$ajax.post('/notebooks/v1/notebooks/show-memory-usage', {
                id: this.id,
                timeUnit: this.time
            })
            if (!success) {
                this.$showErr(msg);
                this._stopIntervalTask();
                return;
            }
            this.data = data;
        },
        _createIntervalTask() {
            let vm = this;
            this.intervalTask = new IntervalTask({
                fn: () => {
                    vm.getData().then(() => {
                        vm.intervalTask && vm.intervalTask.next();
                    });
                },
                interval: 10000,
                autoStart: true
            });
        },
        _stopIntervalTask() {
            this.intervalTask.stop();
            this.intervalTask = null;
        }
    },
    beforeDestroy() {
        if (this.intervalTask) {
            this._stopIntervalTask();
        }
    },
    
}
</script>

<style lang="less" scoped>
.memory-card {
    width: 100%;
    height: 100%;
    
    &-top {
        display: flex;
        justify-content: space-between;
        color: #3D3D3D;
        
        &__value {
            margin: 8px 0;
            height: 28px;
            font-size: 20px;
            text-align: center;
            &--ignore {
                height: 17px;
                font-size: 12px;
            }
        }
        
        &__lable {
            height: 17px;
            font-size: 12px;
        }
    }
    
    .el-divider {
        margin: 12px 0 16px 0;
    }
    
    &-charts {
        height: 195px;
    }
}
</style>
